<template>
  <div id="mv" class="page">
      <header>
          <div id="area">
              <span class="title">地区</span>
              <span v-for="(item,index) in area" :key="index" class="titleItem" @click="getMV()">
                <el-radio v-model="selectArea" :label="index" border>{{item}}</el-radio>
              </span>
          </div>
          <div id="type">
            <span class="title">类型</span>
            <span v-for="(item,index) in type" :key="index" class="titleItem" @click="getMV()">
              <el-radio v-model="selectType" :label="index" border>{{item}}</el-radio>
            </span>
          </div>
          <div id="order">
            <span class="title">播放量</span>
            <span v-for="(item,index) in order" :key="index" class="titleItem" @click="getMV()">
              <el-radio v-model="selectOrder" :label="index" border>{{item}}</el-radio>
            </span>
          </div>
      </header>
        <div class="content">
            <div class="mvItem" v-for="(item,index) in mvList" :key="index">
              <a href="">
                <img :src="item.cover" :title="item.name" width="100%;" class="image">
                <span>{{item.artistName}} - {{item.name}}</span>
              </a>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  name: "mv",
  data(){
      return{
        mvList:[],
        area:['全部','内地','港台','欧美','日本','韩国'],
        type:['全部','官方版','原版','现场版','网易出品'],
        order:['上升最快','最热','最新'],
        selectArea:'',
        selectType:'',
        selectOrder:'',
        condition:[],
     }
  },
  methods:{

    getMV(){
      this.$get("https://autumnfish.cn/mv/all").then(result =>{
        console.log(result.data);
        this.mvList = result.data;
      })
    }
  },
  created() {
    this.getMV();
  }
}
</script>

<style scoped>
#mv header>div{
    margin-top:10px;
}
#mv .title{
  display: inline-block;
  font-size:18px;
  width:70px;
  margin-right:30px;
  text-align: right;
}
#mv .titleItem{
  margin-right:20px;
}
.mvItem{
  width: 200px;
  margin:10px 5px 10px 5px;
}
.content{
   flex-wrap: wrap;
   margin-top:20px;
}
</style>
